<template>
  <placeholder :loading="fetching">
    <template #loading>
      <div class="topbar-skeleton" key="skeleton">
        <div class="statistics-skeleton">
          <skeleton-line class="count-skeleton" />
          <skeleton-line class="like-skeleton" />
        </div>
        <div class="sort-skeleton">
          <skeleton-line />
        </div>
      </div>
    </template>
    <template #default>
      <div class="topbar" key="element">
        <div class="statistics">
          <div class="total">
            <strong class="count">{{ total || 0 }}</strong>
            <span>人觉得很牛逼</span>
          </div>
          <button class="like" :class="{ liked: isPageLiked }" @click="handleLikePage">
            <i class="iconfont icon-like" />
            <strong class="count">{{ likes || 0 }}</strong>
          </button>
        </div>
        <div class="sort">
          <button class="button" :class="{ actived: sort === -1 }" @click="handleSortList(-1)">最新</button>
          <button class="button" :class="{ actived: sort === 2 }" @click="handleSortList(2)">最热</button>
        </div>
      </div>
    </template>
  </placeholder>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useEnhandle } from "@/enhandle";
import { usePageLike } from "@/transforms/state";
import SkeletonLine from "@/components/skeleton/line.vue";

export default defineComponent({
  name: 'CommentTopbar',
  components: {
    SkeletonLine,
  },
  props: {
    fetching: {
      type: Boolean,
      required: true
    },
    total: {
      type: Number
    },
    sort: {
      type: Number,
      required: true
    },
    likes: {
      type: Number,
      required: true
    },
    articleId: {
      type: Number,
      required: true
    }
  },
  emits: ['sort'],
  setup(props, context) {
    const { store, isMobile } = useEnhandle()
    const { isLiked: isPageLiked, like: likePage } = usePageLike(props.articleId)
    const isVisibleSponsor = ref(false)

    const handleSortList = (sort) => {
      if (sort !== props.sort) {
        context.emit('sort', sort)
      }
    }

    const handleLikePage = async () => {
      if (isPageLiked.value) {
        return false
      }
      // gtag?.event('喜欢当页', {
      //   event_category: GAEventActions.Click,
      //   event_label: GAEventTags.Comment
      // })
      try {
        await store.dispatch(
          props.articleId === 0
            ? 'global/fetchLikeSite'
            : 'article/fetchLikeArticle',
          props.articleId
        )
        likePage()
      } catch (error) {
        // const message = i18n.t(LANGUAGE_KEYS.COMMENT_POST_ERROR_ACTION)
        console.warn(error)
        // alert(message)
      }
    }

    const handleSponsor = () => {
      isVisibleSponsor.value = true
      // gtag?.event('评论赞赏弹窗', {
      //   event_category: GAEventActions.Click,
      //   event_label: GAEventTags.Comment
      // })
    }

    return {
      isMobile,
      isVisibleSponsor,
      isPageLiked,
      handleSponsor,
      handleLikePage,
      handleSortList
    }
  }
})
</script>

<style lang="scss" scoped>
$topbar-size: 2em;

.sponsor-modal {
  width: 600px;
  height: 200px;
  border-radius: $sm-radius !important;
}

.topbar,
.topbar-skeleton {
  display: flex;
  padding-bottom: $gap;
  margin-bottom: $lg-gap;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed $module-bg-darker-1;
}

.topbar-skeleton {
  .statistics-skeleton {
    display: flex;
    width: 70%;

    .count-skeleton {
      width: 20%;
      height: $topbar-size;
      margin-right: 1rem;
    }
    .like-skeleton {
      height: $topbar-size;
      width: 40%;
    }
  }

  .sort-skeleton {
    width: 20%;
    height: $topbar-size;
  }
}

.topbar {
  .statistics {
    display: flex;

    .like,
    .sponsor,
    .total {
      height: $topbar-size;
      line-height: $topbar-size;
      padding: 0 0.6em;
      margin-right: $sm-gap;
      background-color: $module-bg-darker-1;
      @include radius-box($mini-radius);

      .count {
        margin-right: $xs-gap;
      }
    }

    .like {
      padding-left: 0;
      @include background-transition();

      .iconfont {
        display: inline-block;
        width: $topbar-size;
        text-align: center;
        margin-right: $sm-gap;
        background-color: $module-bg-darker-2;
        @include background-transition();
      }

      &:hover {
        background-color: $module-bg-hover;
        .iconfont {
          background-color: $module-bg-darker-3;
        }
      }

      &.liked {
        cursor: no-drop;
        .iconfont {
          color: $red;
        }
      }
    }

    .sponsor {
      color: $text-reversal;
      background-color: $primary-lighter;
      @include background-transition();
      &:hover {
        background-color: $primary;
      }
    }
  }

  .sort {
    .button {
      margin-left: $gap;

      &.actived {
        color: $link-color-hover;
        font-weight: bold;
      }
    }
  }
}
</style>
